<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      v-show="(setData?setData.isShowTableHead:true)"
      :isCheckbox="true"
      :isNeedTree="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          v-if="!setData"
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARKING_OPERATION:CHARGEWATER:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'enterCardImg' == props.prop">
                  <a
                    v-if="scope.row['enterCardImg'] && scope.row['enterCarImg']"
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['enterCarImg'])"
                  >
                    <img
                      class="parkingImg"
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row['enterCardImg']"
                    />
                  </a>
                  <a
                    v-else-if="!scope.row['enterCardImg'] && scope.row['enterCarImg']"
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['enterCarImg'])"
                  >查看大图</a>
                  <span v-else>暂无图片</span>
                </span>
                <span
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='0'  && scope.row['openUrlInvoice']"
                  @click="copyLink(scope.row)"
                  class="row-href cursor"
                >点击复制开票链接</span>
                <span
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='1'"
                >无</span>
                <span
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='2' && scope.row['invoiceFilePath'].length==0"
                ></span>
                <a
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='2'"
                  :href="scope.row['invoiceFilePath']"
                  download="invoice.pdf"
                  class="row-href cursor"
                  target="_blank"
                >已开票，点击下载</a>
                <span
                  class="row-href"
                  v-else-if="'carCode'==props.prop && (scope.row.supportVirtualCarcode || scope.row[props.prop].indexOf('智')>-1)"
                  @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')"
                >{{ scope.row[props.prop] }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>
        <multi-fun-table
          v-else
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARKING_OPERATION:CHARGEWATER:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'enterCarImg' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['enterCarImg'])"
                  >
                    <img
                      class="parkingImg"
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.enterCardImg"
                    />
                  </a>
                </span>
                <span
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='0' && scope.row['openUrlInvoice']"
                  @click="copyLink(scope.row)"
                  class="row-href"
                >点击复制开票链接</span>
                <span
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='1'"
                >无</span>
                <span
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='2' && scope.row['invoiceFilePath'].length==0"
                ></span>
                <a
                  v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='2'"
                  :href="scope.row['invoiceFilePath']"
                  download="invoice.pdf"
                  class="row-href"
                >已开票，点击下载</a>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>
    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>

    <!-- 展示已绑定的车牌号 -->
    <basic-modal ref="bindingCarCodeModal" width="500" customeClass>
      <h3 slot="title">车牌号</h3>
      <div class="modal-body" slot="modal-body">
        <p v-for="(item,index) in bindingCarCodeList">
          <span>逻辑卡号{{index+1}}：</span>
          <span>{{item.carCode}}</span>
          <span>({{item.cardCode}})</span>
        </p>
      </div>
      <div class="modal-footer" slot="modal-footer"></div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import charge_water from "./js/charge_water.js";
export default {
  name: "chargeWater",
  mixins: [common, stardardList, invokeModal, images, charge_water],
  components: {
    BigPicModal
  },
  props: ["setData"],
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      fixedCols: 3,
      total: 0,
      paramName: "parkIds",
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          name: "query_time",
          text: "支付时间",
          propName: "query_payTimeFrom,query_payTimeTo",
          value: today,
          style: { width: "360px" }
        },
        {
          //复合型输入框
          index: 2,
          isShow: false,
          type: "mixedInput",
          name: "query_carCode",
          text: "",
          value: "query_carCode",
          inputVal: "",
          style: { width: "70px" },
          isHandleChange: true,
          btnFlag: "query_logicCardCode",
          options: [
            { name: "车牌号", value: "query_carCode" },
            { name: "卡票号", value: "query_cardNum" },
            { name: "自助码", value: "query_selfCode" },
            { name: "逻辑卡号", value: "query_logicCardCode" },
            { name: "卡面号码", value: "query_faceCardCode" }
          ]
        },
        {
          index: 3,
          isShow: false,
          type: "select",
          name: "query_parkVipType",
          text: "VIP类型",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "临时车", value: "0" },
            { name: "停车场VIP", value: "1" }
          ]
        },
        {
          index: 4,
          isShow: false,
          type: "select",
          name: "query_payMode",
          text: "支付方式",
          value: "",
          options: [
            { name: "--全部--", value: "" },
            { name: "未定义", value: "0" },
            { name: "现金", value: "1" },
            { name: "自发卡", value: "2" },
            { name: "次数", value: "3" },
            { name: "微信支付", value: "4" },
            { name: "支付宝支付", value: "5" },
            { name: "银联闪付", value: "6" },
            { name: "交通卡", value: "7" },
            { name: "免费", value: "8" },
            { name: "账户余额", value: "9" },
            { name: "银联接触卡", value: "10" },
            { name: "银联网络支付", value: "11" },
            { name: "第三方余额", value: "12" },
            { name: "NFC", value: "13" },
            { name: "普通储蓄卡", value: "14" },
            { name: "信用卡", value: "15" },
            { name: "腾讯无感支付", value: "16" },
            { name: "ETC", value: "17" },
            { name: "手动转账", value: "18" },
            { name: "微信无感支付", value: "19" },
            { name: "支付宝无感支付", value: "20" },
            { name: "银联无感支付", value: "21" }
          ]
        },
        {
          index: 5,
          isShow: false,
          type: "select",
          name: "query_payOrigin",
          text: "支付来源",
          value: "",
          options: [
            { name: "--全部--", value: "" },
            { name: "未定义", value: "0" },
            { name: "出入口", value: "1" },
            { name: "中央缴费", value: "2" },
            { name: "自助缴费机", value: "3" },
            { name: "平板", value: "4" },
            { name: "移动POS机", value: "5" },
            { name: "移动APP", value: "6" },
            { name: "微信服务号", value: "7" },
            { name: "支付宝服务窗", value: "8" },
            { name: "线上支付", value: "9" },
            { name: "独立H5", value: "10" },
            { name: "POMP", value: "11" },
            { name: "VEMS", value: "12" },
            { name: "AOMP", value: "13" },
            { name: "微信小程序", value: "14" },
            { name: "支付宝小程序", value: "15" }
          ]
        },
        {
          index: 6,
          isShow: false,
          type: "text",
          name: "query_tollCollectorName",
          text: "收费员",
          value: ""
        },
        {
          index: 7,
          isShow: false,
          type: "text",
          name: "query_couponName",
          text: "优惠名称",
          value: ""
        },
        {
          index: 8,
          isShow: false,
          type: "text",
          name: "query_billCode",
          text: "订单号",
          value: ""
        },
        {
          index: 9,
          isShow: false,
          type: "select",
          name: "query_isOpenInvoice",
          text: "开票状态",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "未开票", value: "0" },
            { name: "纸质票", value: "1" },
            { name: "电子票", value: "2" }
          ]
        },
        {
          index: 10,
          isShow: false,
          type: "text",
          name: "query_invoiceNumber",
          text: "发票号码",
          value: ""
        }

        // {
        //   index: 2,
        //   isShow: false,
        //   type: "text",
        //   name: "query_carCode",
        //   text: "车牌号",
        //   value: ""
        // },
        // {
        //   index: 3,
        //   isShow: false,
        //   type: "text",
        //   name: "query_cardNum",
        //   text: "卡票号",
        //   value: ""
        // },
        // {
        //   index: 5,
        //   isShow: false,
        //   type: "text",
        //   name: "query_enterAddress",
        //   text: "进场通道",
        //   value: ""
        // },

        // {
        //   index: 10,
        //   isShow: false,
        //   type: "datePicker",
        //   name: "query_time",
        //   text: "进场时间",
        //   propName: "query_approchTimeFrom,query_approchTimeTo",
        //   value: "",
        //   style: { width: "360px" }
        // },
      ],
      theadsInfo: [
        // { index: 0, isShow: true, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: true,
          prop: "parkName",
          text: "停车场",
          minWidth: 90
        },
        {
          index: 2,
          isShow: true,
          prop: "enterCardImg",
          text: "车牌图片",
          initHidden: true
        },
        {
          index: 3,
          isShow: true,
          prop: "carCode",
          text: "车牌号码",
          minWidth: 60
        },
        {
          index: 4,
          isShow: true,
          prop: "cardCode",
          text: "卡票号",
          initHidden: true
        },
        {
          index: 5,
          isShow: true,
          prop: "parkVipTypeStr",
          text: "VIP类型",
          minWidth: 60
        },
        {
          index: 6,
          isShow: false,
          prop: "carTypeStr",
          text: "车辆计费类型",
          initHidden: true
        },
        {
          index: 7,
          isShow: false,
          prop: "checkInTime",
          text: "进场时间",
          minWidth: 100
        },
        {
          index: 8,
          isShow: false,
          prop: "enterAddress",
          text: "进场通道",
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: "payOriginRemark",
          text: "支付来源",
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "payModeRemark",
          text: "支付方式",
          minWidth: 60
        },
        {
          index: 11,
          isShow: false,
          prop: "realValue",
          text: "支付金额"
        },
        {
          index: 12,
          isShow: false,
          prop: "couponTypes",
          text: "优惠类型",
          initHidden: true
        },
        {
          index: 13,
          isShow: false,
          prop: "couponNames",
          text: "优惠名称",
          initHidden: true
        },
        {
          index: 14,
          isShow: false,
          prop: "couponReliefValue",
          text: "券优惠金额",
          initHidden: true
        },
        {
          index: 16,
          isShow: false,
          prop: "parkReliefScore",
          text: "抵扣车场积分",
          initHidden: true
        },
        {
          index: 17,
          isShow: false,
          prop: "parkReliefValue",
          text: "车场积分抵扣金额",
          initHidden: true
        },
        {
          index: 18,
          isShow: false,
          prop: "cityReliefScore",
          text: "抵扣平台积分",
          initHidden: true
        },
        {
          index: 19,
          isShow: false,
          prop: "cityReliefValue",
          text: "平台积分抵扣金额",
          initHidden: true
        },
        {
          index: 20,
          isShow: false,
          prop: "billCode",
          text: "支付订单号",
          initHidden: true
        },
        {
          index: 21,
          isShow: false,
          prop: "payTime",
          text: "支付时间",
          minWidth: 100
        },
        {
          index: 22,
          isShow: false,
          prop: "tollCollectorName",
          text: "收费员",
          initHidden: true
        },
        {
          index: 23,
          isShow: false,
          prop: "isOpenInvoiceStr",
          text: "开票状态",
          initHidden: true
        },
        {
          index: 24,
          isShow: false,
          prop: "invoiceNumber",
          text: "发票号码",
          initHidden: true
        },
        {
          index: 25,
          isShow: false,
          prop: "invoiceFilePath",
          text: "开票链接",
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {
    confirmSearch(params) {
      this.pageNumber = 1;
      this.getList();
    }
  }
};
</script>

<style lang="less">
</style>
